<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./练习1样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./修罗.webp"></li>
            <li><img src="./刑天.webp"></li>
            <li><img src="./战神刑天.jpg"></li>
            <li><img src="./金刚.webp"></li>
            <li><img src="./飞影.webp"></li>
        </ul>
        <span class="iconfont icon-lujing l_but"></span>
        <span class="iconfont icon-a-11 r_but"></span>
        <ol>
            <li index="0" style="background-color: red;"></li>
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
            <li index="4"></li>
        </ol>
    </div>
</body>
</html>
<script>
    var imgs=document.querySelectorAll('.box ul img')
    var r_but=document.querySelector('.r_but')
    var l_but=document.querySelector('.l_but')
    var ul=document.querySelector('ul')
    var lis=document.querySelectorAll('.box ol li')
    var box=document.querySelector('.box')
    var num=0
    var time
    r_but.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.left=-num*600+'px'
        change(num)
    }
    l_but.onclick=function(){
        num--
        if(num<0){
            num=imgs.length-1
        }
        ul.style.left=-num*600+'px'
        change(num)
    }
    box.onmouseenter=function(){
        r_but.style.display='block'
        l_but.style.display='block'
        clearInterval(time)
    }
    box.onmouseleave=function(){
        r_but.style.display=''
        l_but.style.display=''
        startLunbo()
    }
    function startLunbo(){
        time=setInterval(function(){
            r_but.onclick()
        },2000)
    }
    for(i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            num=index
            ul.style.left=-num*600+'px'
            change(num)
        }
    }
    function change(index){
        for(i=0;i<lis.length;i++){
            lis[i].style.backgroundColor='white'  
        }
        lis[index].style.backgroundColor='red'
    }
    startLunbo()
</script>